<template>
	<su-popup :show="modelValue" type="top" round="10" :space="sys_navBar + 40" backgroundColor="#fff"
		:zIndex="10" @close="emit('update:modelValue',false)" @change="popupChange">
		<view class="comp-content" :style="{'--active-color':activeColor}">
			<view class="status" v-if="data.Service_features&&data.Service_features.length">
				<view class="status-title">服务特色</view>
				<view class="status-content ss-flex ss-flex-wrap">
					<template  v-for="item in data.Service_features" :key="item.value">
						<button :class="['ss-reset-button content-item ',{active:state.service.includes(item.value)}]"
							@click="tapService(item)">
							<view class="item-label">{{item.name}}</view>
							<view class="item-bg"/>
						</button>
					</template>
				</view>
			</view>
			<view class="status" v-if="data.business_status&&data.business_status.length">
				<view class="status-title">营业状态</view>
				<view class="status-content ss-flex ss-flex-wrap">
					<template  v-for="item in data.business_status" :key="item.value">
						<button :class="['ss-reset-button content-item ',{active:state.status.includes(item.value)}]"
							@click="tapStatus(item)">
							<view class="item-label">{{item.name}}</view>
							<view class="item-bg"/>
						</button>
					</template>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomBtn ss-flex">
			<button class="ss-reset-button reset" @click="onReset">重置</button>
			<button class="ss-reset-button submit" :style="{'--color':activeColor}" @click="submit">完成</button>
		</view>
	</su-popup>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, watch,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { cloneDeep } from 'lodash'
	const sys_navBar = sheep.$platform.navbar;
	const emit = defineEmits(['update:modelValue','change'])
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		},
		activeColor: {
			type: String,
			default: '#1AC6A0'
		},
		data:{
			type:Object,
			default:()=>({})
		}
	})
	const state = reactive({
		status:[],
		saveStatus:[],
		statusList:[],
		service:[],
		saveService:[],
		serviceList:[]
	})
	watch(()=>props.data,(newVal,oldVal)=>{
		initData()
	})
	onLoad((opt)=>{

	})
	function initData(){
		state.statusList= cloneDeep(props.data.business_status)
		state.serviceList= cloneDeep(props.data.Service_features)
	}
	function popupChange(e){
		if(e.show){
			state.service = cloneDeep(state.saveService)
			state.status = cloneDeep(state.saveStatus)
		}
	}
	function tapStatus(e){
		let ind = state.status.findIndex(value => value == e.value)
		if(ind === -1){
			 state.status.push(e.value)
		}else{
			state.status.splice(ind,1)
		}
	}
	function tapService(e){
		let ind = state.service.findIndex(value => value == e.value)
		if(ind === -1){
			 state.service.push(e.value)
		}else{
			state.service.splice(ind,1)
		}
	}
	function onReset(){
		state.service = []
		state.status = []
		console.log('重置')
	}
	function submit(){
		state.saveService = cloneDeep(state.service)
		state.saveStatus = cloneDeep(state.status)
		let data = {}
		let service = cloneDeep(state.service).join()
		let status = cloneDeep(state.status).join()
		if(service)data['Service_features'] = service
		if(status)data['business_status'] = status
		emit('change',data)
		emit('update:modelValue',false)
	}
	
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.bottomBtn{
		height: 60px;
		padding: 10px 10px;
		&>button{
			flex:1;
			height: 40px;
			margin: 0 10px;
			border-radius: 20px;
		}
		.reset{
			border:1px solid #ddd;
			color:#333;
			font-size: 32rpx;
		}
		.submit{
			color:#fff;
			background: var(--color);
			font-size: 32rpx;
		}
	}
	.comp-content{
		padding: 20rpx 30rpx;
		min-height: 300rpx;
		.status{
			&>view{
				margin-bottom: 20rpx;
			}
			.status-title{
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
			}
			.status-content{
				.content-item{
					position: relative;
					height: 60rpx;
					min-width: 200rpx;
					border-radius: 30rpx;
					font-size: 20rpx;
					margin-right: 20rpx !important;
					border: 1px solid #ccc;
					.item-label{
						position: absolute;
						line-height: 60rpx;
						z-index: 2;
						font-size: 28rpx;
					}
					.item-bg{
						position: absolute;
						z-index: 1;
						width: 100%;
						height: 100%;
						opacity: 0.1;
					}
				}
				.active{
					border: 1px solid var(--active-color);
					.item-bg{
						background: var(--active-color);
					}
				}
			}
		}
	}
</style>